<template>
  <view style="background-color: #181816; height: 100%;">
    <!-- logo -->
    <view class="big_logo">
      <image src="../../../static/big_logo.png"></image>
    </view>
    <!-- 名称 -->

    <!-- 版本号 -->
    <view class="version">{{ info.version ? info.version : `V1.0.2` }}</view>
    <!-- 支持方 -->
    <view class="support_host">
      <!-- 至信链 -->
      <view class="ZXL">
        <image src="../../../static/zxl_logo.png"></image>
      </view>
      <!-- 经营许可 -->
      <view class="ICP">ICP经营许可 京B2-20221836号</view>
    </view>
    <!-- 隐私用户协议 -->
    <view class="agreement">
      <!--  -->
      <view class="agreement_link">
        <text @click="userAgreement">用户协议</text>
        与
        <text @click="privacyAgreement">隐私保护指引</text>
      </view>
      <view class="agreement-phone">联系电话:（010）53687780</view>
      <view class="copyright">Copyright © 2022</view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.init()
  },
  data() {
    return {
      info: {},
    }
  },
  methods: {
    async init() {
      const info = uni.getAccountInfoSync()
      this.info = info.miniProgram
      console.log('info', this.info)
    },
    /* 用户协议 */
    userAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user_agreement',
      })
    },
    /* 隐私协议 */
    privacyAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/privacy_agreement',
      })
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #181816;
}

.big_logo {
  height: 250rpx;
  width: 275rpx;
  margin: 150rpx auto 0 auto;

  image {
    height: 100%;
    width: 100%;
  }
}

.title {
  background-image: linear-gradient(-90deg, #f0c611 6%, #4effff 100%);
  background-clip: text;
  margin-top: 45rpx;
  text-align: center;
  letter-spacing: 3rpx;
  font-size: 45rpx;
  font-weight: bold;
  -webkit-background-clip: text;
  color: transparent;
}

.version {
  font-size: 32rpx;
  text-align: center;
  line-height: 100%;
  margin: 50rpx 0;
  color: #999999;
}

.support_host {
  width: 40%;
  margin: 320rpx auto 0 auto;

  .ZXL {
    width: 100%;

    image {
      height: 70rpx;
      width: 100%;
    }
  }

  .ICP {
    font-size: 20rpx;
    color: #999999;
    text-align: center;
  }
}

.agreement {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 300rpx auto 0 auto;

  .agreement_link {
    color: #999999;
    font-size: 24rpx;
    text-align: center;

    text {
      color: #4effff;
    }
  }
  .agreement-phone {
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    margin: 20rpx 0;
    justify-content: center;
  }
  .copyright {
    font-size: 24rpx;
    color: #fff;
    text-align: center;
  }
}
</style>
